<template>
  <div>
    <div v-for="item in hotCityList" :key="item.prefix" class="box">
      <header class="uppercase">{{ item.prefix | Capitalization }}</header>
      <div class="cityList">
        <div
          class="item"
          v-for="value in item.cities"
          :key="value.cityId"
          @click="goHome(value)"
        >
          {{ value.name }}
        </div>
      </div>
    </div>
    <van-index-bar :index-list="indexList">
      <div v-for="item in cityList" :key="item.prefix">
        <!-- <header>{{ item.prefix | Capitalization }}</header> -->
        <van-index-anchor
          :index="item.prefix | Capitalization"
          class="uppercase"
        ></van-index-anchor>
        <div class="cityList">
          <van-cell
            v-for="value in item.cities"
            :key="value.cityId"
            :title="value.name"
            class="item cityItem"
            @click="goHome(value)"
          ></van-cell>
        </div>
        <!-- <div class="city_list">
        <div class="item" v-for="value in item.cities" :key="value.cityId">
          {{ value.name }}
        </div>
      </div> -->
      </div>
    </van-index-bar>
  </div>
</template>

<script>
// import { getCityDataApi } from "../utils/api";
import { mapState, mapActions, mapMutations } from "vuex";

export default {
  data() {
    return {
      // cityList: [],
      // hotCityList: [],
      // indexList: [],
    };
  },
  // computed: mapState(["cityList", "hotCityList", "indexList"]),
  computed: mapState({
    cityList: (state) => state.city.cityList,
    hotCityList: (state) => state.city.hotCityList,
    indexList: (state) => state.city.indexList,
  }),
  created() {
    // this.getCityData();
    this.getCityListAsync();
    console.log(this.cityList);
  },
  methods: {
    ...mapActions(["getCityListAsync"]),
    ...mapMutations(["changeCityName"]),
    // async getCityData() {
    //   const res = await getCityDataApi();
    //   console.log(res);
    //   this.hotCityList = res.result.splice(0, 1);
    //   this.cityList = res.result;
    //   res.result.forEach((element) => {
    //     this.indexList.push(element.prefix);
    //   });
    // },
    goHome(value) {
      this.changeCityName({
        id: value.cityId,
        name: value.name,
      });
      this.$router.push("/home");
    },
  },
  filters: {
    Capitalization(val) {
      return val.slice(0, 1).toUpperCase().concat(val.substring(1));
    },
  },
};
</script>

<style lang="less" scoped>
.uppercase {
  padding-left: 25px;
  line-height: 30px;
  font-size: 14px;
  color: #333;
  background-color: #ccc;
}

.item {
  height: 44px;
  margin-left: 15px;
  border-bottom: 1px solid #c8c7cc;
  font-size: 14px;
  color: #333;
  background-color: #f5f5f5;
}
.cityItem {
  margin-right: 15px !important;
}
.cityList {
  overflow: hidden;
  background-color: #f5f5f5;
  padding-bottom: 8px;
  padding-right: 15px;
}

.box {
  &:first-child .item {
    float: left;
    background: #fff;
    width: 29%;
    height: 33px;
    margin-top: 15px;
    margin-left: 4%;
    padding: 0 4px;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    line-height: 33px;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
